<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>JSON代码格式化及着色</title>
<meta name="description" content="开发工具">
<meta name="keywords" content="开发工具">
<script src="jquery.js"></script>
<script src="url_en-decode.js"></script>
<script>
	window.TAB = "  ";
	function IsArray(obj) {
		return obj && typeof obj === 'object' && typeof obj.length === 'number' && !(obj.propertyIsEnumerable('length'))
	}
	function Process() {
		var json = document.getElementById("RawJson").value;
		document.getElementById("Canvas").style.display = "block";
		var html = "";
		try {
			if (json == "") json = "\"\"";
			var obj = eval("[" + json + "]");
			html = ProcessObject(obj[0], 0, false, false, false);
			document.getElementById("Canvas").innerHTML = "<PRE class='CodeContainer'>" + html + "</PRE>"
		} catch(e) {
			alert("JSON语法错误,不能格式化,错误信息:\n" + e.message);
			document.getElementById("Canvas").innerHTML = ""
		}
	}
	function ProcessObject(obj, indent, addComma, isArray, isPropertyContent) {
		var html = "";
		var comma = (addComma) ? "<span class='Comma'>,</span> ": "";
		var type = typeof obj;
		if (IsArray(obj)) {
			if (obj.length == 0) {
				html += GetRow(indent, "<span class='ArrayBrace'>[ ]</span>" + comma, isPropertyContent)
			} else {
				html += GetRow(indent, "<span class='ArrayBrace'>[</span>", isPropertyContent);
				for (var i = 0; i < obj.length; i++) {
					html += ProcessObject(obj[i], indent + 1, i < (obj.length - 1), true, false)
				}
				html += GetRow(indent, "<span class='ArrayBrace'>]</span>" + comma)
			}
		} else if (type == 'object' && obj == null) {
			html += FormatLiteral("null", "", comma, indent, isArray, "Null")
		} else if (type == 'object') {
			var numProps = 0;
			for (var prop in obj) numProps++;
			if (numProps == 0) {
				html += GetRow(indent, "<span class='ObjectBrace'>{ }</span>" + comma, isPropertyContent)
			} else {
				html += GetRow(indent, "<span class='ObjectBrace'>{</span>", isPropertyContent);
				var j = 0;
				for (var prop in obj) {
					html += GetRow(indent + 1, '<span class="PropertyName">"' + prop + '"</span>: ' + ProcessObject(obj[prop], indent + 1, ++j < numProps, false, true))
				}
				html += GetRow(indent, "<span class='ObjectBrace'>}</span>" + comma)
			}
		} else if (type == 'number') {
			html += FormatLiteral(obj, "", comma, indent, isArray, "Number")
		} else if (type == 'boolean') {
			html += FormatLiteral(obj, "", comma, indent, isArray, "Boolean")
		} else if (type == 'function') {
			obj = FormatFunction(indent, obj);
			html += FormatLiteral(obj, "", comma, indent, isArray, "Function")
		} else if (type == 'undefined') {
			html += FormatLiteral("undefined", "", comma, indent, isArray, "Null")
		} else {
			html += FormatLiteral(obj, "\"", comma, indent, isArray, "String")
		}
		return html
	}
	function FormatLiteral(literal, quote, comma, indent, isArray, style) {
		if (typeof literal == 'string') literal = literal.split("<").join("&lt;").split(">").join("&gt;");
		var str = "<span class='" + style + "'>" + quote + literal + quote + comma + "</span>";
		if (isArray) str = GetRow(indent, str);
		return str
	}
	function FormatFunction(indent, obj) {
		var tabs = "";
		for (var i = 0; i < indent; i++) tabs += window.TAB;
		var funcStrArray = obj.toString().split("\n");
		var str = "";
		for (var i = 0; i < funcStrArray.length; i++) {
			str += ((i == 0) ? "": tabs) + funcStrArray[i] + "\n"
		}
		return str
	}
	function GetRow(indent, data, isPropertyContent) {
		var tabs = "";
		for (var i = 0; i < indent && !isPropertyContent; i++) tabs += window.TAB;
		if (data != null && data.length > 0 && data.charAt(data.length - 1) != "\n") data = data + "\n";
		return tabs + data
	}
</script>
<style>
*{font-size:12px; font-family:Tahoma, Arial, "宋体"; list-style:none; word-break:break-all; word-wrap:break-word; outline:none;}
.Canvas{ font: 10pt Georgia; background-color:#ECECEC; color:#000000; border:solid 1px #CECECE;width:800px;margin:0 auto;overflow:scroll;}
.ObjectBrace{ color:#00AA00; font-weight:bold;}
.ArrayBrace{ color:#0033FF; font-weight:bold;}
.PropertyName{ color:#CC0000; font-weight:bold;}
.String{ color:#007777;}
.Number{ color:#AA00AA;}
.Boolean{  color:#0000FF;}
.Function{  color:#AA6633;  text-decoration:italic;}
.Null{  color:#0000FF;}
.Comma{ color:#000000;  font-weight:bold;}
PRE.CodeContainer{ margin-top:0px;  margin-bottom:0px;}
.jsonUrl {width:500px;}
ul, ol {padding: 0;margin: 0 0 9px 25px;}
.input_button {padding: 5px;border: 1px solid #CCC;background-color:#F3F3F3;color: #555;}
.toolsTab{width:800px; margin:0 auto;margin-top:20px;}
.tab{display:none;}

input[type="button"]{padding: 5px;border: 1px solid #CCC;background-color: #F3F3F3;color: #555;}

.top-div{width:800px; height:40px; margin:5px auto; color:#fff;font-size:25px;text-align:center;line-height:40px;margin-top:20px;}
.main-div{width:800px; height:330px; margin:0 auto;background-color:#D9EDF7;}
.main-div ul li{margin-top:10px;}
textarea{width:570px; height:100px; margin-left:15px; overflow:auto;}
.input_button{float:left; width:90px; height:20px; margin-left:6px; line-height:20px; text-align:center; cursor:pointer;}
#clipboard_container{float:left; width:100px; height:32px; margin-left:-101px;}
#result_text{float:left; height:32px; line-height:32px; margin-left:5px; color:#f00;}
.json-div{width:800px;margin:0 auto;background-color:#D9EDF7;}
.qr-div{width:800px;margin:0 auto;padding:10px;}
.qr-box{width:800px;height:200px;margin:0 auto;background-color:#D9EDF7;padding:10px;}
.js-div{width:800px;margin:0 auto;padding:10px;}
.hide{display:none;}
.show{display:block;}
.clearfix {display: block;clear:both;}

.nav {margin-left: 0;margin-bottom:1px;list-style: none;height:35px;}

.nav-tabs, .nav-pills {}
.nav-tabs {border-bottom: 1px solid #DDD;}
li{line-height: 18px;}
.nav-tabs>li {margin-bottom: -1px;}
.nav-tabs>li, .nav-pills>li {float: left;}

.nav>li>a {display: block;}
.nav-tabs>li>a, .nav-pills>li>a {padding-right: 12px;padding-left: 12px;margin-right: 2px;line-height: 14px;}
.nav-tabs>li>a {padding-top: 8px;padding-bottom: 8px;line-height: 18px;border: 1px solid rgba(0, 0, 0, 0);-webkit-border-radius: 4px 4px 0 0;-moz-border-radius: 4px 4px 0 0;border-radius: 4px 4px 0 0;}
.nav-tabs>.active>a, .nav-tabs>.active>a:hover {color: #555;background-color: #FFF;border: 1px solid #DDD;border-bottom-color: rgba(0, 0, 0, 0);cursor: default;}

a {color: #08C;text-decoration: none;}
.clearfix:before, .clearfix:after {display: table;content: "";}
.clearfix:after {clear: both;}
.clearfix:before, .clearfix:after {display: table;content: "";}
.top-divd{padding: 8px 35px 8px 14px;margin-bottom: 18px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);background-color: #FCF8E3;border: 1px solid #FBEED5;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;color: #C09853;}
.top-div {background-color: #D9EDF7;border-color: #BCE8F1;color: #3A87AD;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}

</style>
</head>
<body>

<div class="toolsTab  clearfix">
    	    <ul class="nav nav-tabs">
				<li class="active"><a href="javascript:;;">JSON格式化</a></li>
                <li><a href="javascript:;;">URL编码解码</a></li>
                <li><a href="javascript:;;">生成二维码</a></li>
                <li><a href="javascript:;;">JSON转译</a></li>
						 
    	    </ul>
    	    <div class="clear"></div>
  </div>
<dl class="tab-panel">

<dd class="tab show">
<div class="top-div">JSON代码格式化</div>
<div class="json-div">
<input type="text" class="jsonUrl" id="jsonUrl" value="http://www.sonzer.cn/dg_v2.0/index.php?g=api2&m=diy&a=phone_case&source=wgc_android&last_update=0">
<input type="Button" value="格式化" onclick="ProcessUrlJson()">
<div>请在下方输入你的JSON:</div>
<textarea id="RawJson" cols="120" rows="8"></textarea><br>
 <input type="Button" value="格式化" onclick="Process()" id="ProcessBtn">
</div>
<div id="Canvas" class="Canvas"></div>
</dd>

<dd class="tab">
<div class="top-div">URL编码解码</div>
<div class="main-div">
	<ul>
		<li style="margin-top:0;"><textarea id="code" onmouseover="javascript:this.focus();this.select();">请把你需要编码解码的内容粘贴在这里！</textarea></li>
		<li style="margin-left:7px;"><div id="js_escape" class="input_button" style="margin-left:0;">escape 编码</div><div id="gb2312_encode" class="input_button">GB2312编码</div><div id="utf8_encode" class="input_button">UTF-8编码</div><div id="decode" class="input_button" style="width:170px;">escape/GB2312/UTF-8解码</div></li>
		<li><textarea id="result_code" onmouseover="javascript:this.focus();this.select();"></textarea></li>
		<li style="margin-left:155px;"><div id="copy" class="input_button" style="margin-left:0;">复制结果</div><!--[if !IE]><!--><div id="clipboard_container"><embed id="clipboardswf" name="clipboardswf" devicefont="false" width="100" height="32" src="clipboard.swf" wmode="transparent" menu="false" allowscriptaccess="sameDomain" swliveconnect="true" type="application/x-shockwave-flash"></embed></div><!--<![endif]--><div id="clear" class="input_button">清除</div><div id="result_text"></div></td>
	</ul>
</div>
</dd>
<dd class="tab">
<div class="top-div">生成二维码</div>
<div class="qr-div">
<div>
<input type="text" class="jsonUrl" id="qrUrl" value="">
<input type="Button" value="生成二维码" onclick="ProcessUrlQr()">
</div>
<div class="qr-box"><img id='qrcodeimg' src=""></div>
</div>

</dd>
<dd class="tab">

<div class="top-div">JSON转译</div>
<div class="json-div">
		 <form id="JSONVYasuo" method="post" action="." name="JSONVYasuo">
                <input type="hidden" id="reformat" value="1" />
                <input type="hidden" id="compress" value="0" />
                <div>
                    <textarea id="json_input" name="json_input" class="json_input" rows="30" cols="100" spellcheck="false" placeholder="Enter JSON to validate"></textarea>
                </div>
                <div class="validateButtons clear">
                    <div class="left">
					<input type="button" value="压缩" onclick="yasuo(1);"/>
                    <input type="button" value="转义" onclick="yasuo(2);"/>
                    <input type="button" value="压缩并转义" onclick="yasuo(3);"/>
                    <input type="button" value="去除转义" onclick="yasuo(4);"/>
					<input type="button" value="Unicode转中文" onclick="u2h()"/>
					<input type="button" value="中文转Unicode" onclick="h2u()"/>
					<input type="button" value="中文符号转英文符号" title="如果您从他人技术博客copy代码时,可能会因为json中重要符号被替换成中文字符而导致校验失败,这时就可以使用本功能替换"	onclick="cnChar2EnChar()"/>
                    </div>
                </div>
            </form>
</div>
</dd>
</dl>
<script>
var ProcessUrlQr=function(){
    var toUrl=$('#qrUrl').val();
    var imgurl="qrcode.php?tourl="+toUrl+'&level=5';
    $('#qrcodeimg').attr('src',imgurl);
}

var ProcessUrlJson=function(){
var toUrl=$('#jsonUrl').val();
var re=/http:\/\/192/;
if(re.test(toUrl))
{
     var url="http://192.168.99.99/getJson.php?url="+encodeURIComponent($('#jsonUrl').val());
}else{
     var url="getJson.php?url="+encodeURIComponent($('#jsonUrl').val());
 }

url="getJson.php?url="+encodeURIComponent($('#jsonUrl').val());
$.ajax({type:'get',url:url,dataType:'jsonp',async:false,jsonp: "jsonpCallback",jsonpCallback:"jsonpCallback",success:function(data){
    $("#RawJson").html(JSON.stringify(data));
    $("#ProcessBtn").click();
  },error:function(data){alert('错误');}});
}
$(".nav-tabs li").click(function(){
	   _this=$(this);
	   _this.parent().find("li.active").removeClass("active");
       _this.addClass("active");
       $(".tab-panel .tab.show").removeClass("show");
	   var idx=_this.index();
	   $(".tab-panel .tab").eq(idx).addClass("show");
});

</script>
<script>
	/**
	1 压缩
	2 转义
	3 压缩转义
	*/
	function yasuo(ii){
		 var txtA = document.getElementById("json_input");
		 var text = txtA.value;
			if(ii==1||ii==3){
				 text = text.split("\n").join(" ");
				var t = [];
				var inString = false;
				for (var i = 0, len = text.length; i < len; i++) {
					var c = text.charAt(i);
					if (inString && c === inString) {
						// TODO: \\"
						if (text.charAt(i - 1) !== '\\') {
							inString = false;
						}
					} else if (!inString && (c === '"' || c === "'")) {
						inString = c;
					} else if (!inString && (c === ' ' || c === "\t")) {
						c = '';
					}
					t.push(c);
				}
				text= t.join('');
			}
			if(ii==2||ii==3){
				 text = text.replace(/\\/g,"\\\\").replace(/\"/g,"\\\"");
			}
			if(ii==4){
			 text = text.replace(/\\\\/g,"\\").replace(/\\\"/g,'\"');
			}
			 txtA.value = text;
	}	
String.prototype.trim=function()
{
     return this.replace(/(^\s*)|(\s*$)/g, '');
}

var GB2312UnicodeConverter={
  ToUnicode:function(str){
    var txt= escape(str).toLocaleLowerCase().replace(/%u/gi,'\\u');
	return txt.replace(/%7b/gi,'{').replace(/%7d/gi,'}').replace(/%3a/gi,':').replace(/%2c/gi,',').replace(/%27/gi,'\'').replace(/%22/gi,'"').replace(/%5b/gi,'[').replace(/%5d/gi,']');
  }
  ,ToGB2312:function(str){
    return unescape(str.replace(/\\u/gi,'%u'));
  }
};

function u2h(){
	 var txtA = document.getElementById("json_input");
	 var text = txtA.value;
	 text = text.trim();
	// text = text.replace(/\u/g,"");
	 txtA.value = GB2312UnicodeConverter.ToGB2312(text);	 
}

function h2u(){
	var txtA = document.getElementById("json_input");
	 var text = txtA.value;
	 text = text.trim();
	// text = text.replace(/\u/g,"");
	 txtA.value = GB2312UnicodeConverter.ToUnicode(text);
}

function cnChar2EnChar(){
 var txtA = document.getElementById("json_input");
  var str = txtA.value;
str = str.replace(/\’|\‘/g,"'").replace(/\“|\”/g,"\"");
str = str.replace(/\【/g,"[").replace(/\】/g,"]").replace(/\｛/g,"{").replace(/\｝/g,"}");
str = str.replace(/，/g,",").replace(/：/g,":");
 txtA.value = str;
}
</script>
</body>
</html>